<!-- *** NAVBAR ***
_________________________________________________________ -->

<div class="navbar navbar-default yamm" role="navigation" id="navbar">
    <div class="container">
        <div class="navbar-header">

            <a class="navbar-brand home" href="index.html"
               data-animate-hover="bounce">
                <img src="img/logo.png" alt="WeaveSocks logo" class="hidden-xs">
                <img src="img/logo-small.png" alt="WeaveSocks logo"
                     class="visible-xs"><span class="sr-only">WeaveSocks - go to homepage</span>
            </a>
        </div>
        <!--/.navbar-header -->

        <div class="navbar-collapse collapse" id="navigation">

            <ul class="nav navbar-nav navbar-left">
                <li id="tabIndex"><a href="index.html">Home</a>
                </li>
                <li id="tabCatalogue" class="dropdown yamm-fw">
                    <a href="category.html" class="dropdown-toggle">Catalogue <b
                            class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <div class="yamm-content">
                                <div class="row">
                                    <div class="col-sm-3">
                                        <h5>Colours</h5>
                                        <ul>
                                            <li>
                                                <a href="category.html?tags=blue">Blue</a>
                                            </li>
                                            <li>
                                                <a href="category.html?tags=brown">Brown</a>
                                            </li>
                                            <li>
                                                <a href="category.html?tags=green">Green</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-3">
                                        <h5>Size</h5>
                                        <ul>
                                            <li>
                                                <a href="category.html?tags=large">Large</a>
                                            </li>
                                            <li>
                                                <a href="category.html?tags=short">Short</a>
                                            </li>
                                        </ul>
                                        <h5>Function</h5>
                                        <ul>
                                            <li>
                                                <a href="category.html?tags=toes">Toes</a>
                                            </li>
                                            <li>
                                                <a href="category.html?tags=magic">Magic</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-3">
                                        <h5>Featured</h5>
                                        <ul>
                                            <li><a href="category.html?tags=formal">Formal</a>
                                            </li>
                                            <li><a href="category.html?tags=smelly">Smelly</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- /.yamm-content -->
                        </li>
                    </ul>
                </li>
                <li id="tabAccount"><a href="customer-orders.html">Account</a>
                </li>
                <!--<li class="dropdown yamm-fw">-->
                <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="200">Template <b class="caret"></b></a>-->
                <!--<ul class="dropdown-menu">-->
                <!--<li>-->
                <!--<div class="yamm-content">-->
                <!--<div class="row">-->
                <!--<div class="col-sm-3">-->
                <!--<h5>Shop</h5>-->
                <!--<ul>-->
                <!--<li><a href="index.html">Homepage</a>-->
                <!--</li>-->
                <!--<li><a href="category.html">Category - sidebar left</a>-->
                <!--</li>-->
                <!--<li><a href="category-right.html">Category - sidebar right</a>-->
                <!--</li>-->
                <!--<li><a href="category-full.html">Category - full width</a>-->
                <!--</li>-->
                <!--<li><a href="detail.html">Product detail</a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--<div class="col-sm-3">-->
                <!--<h5>User</h5>-->
                <!--<ul>-->
                <!--<li><a href="register.html">Register / login</a>-->
                <!--</li>-->
                <!--<li><a href="customer-orders.html">Orders history</a>-->
                <!--</li>-->
                <!--<li><a href="customer-order.html">Order history detail</a>-->
                <!--</li>-->
                <!--<li><a href="customer-wishlist.html">Wishlist</a>-->
                <!--</li>-->
                <!--<li><a href="customer-account.html">Customer account / change password</a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--<div class="col-sm-3">-->
                <!--<h5>Order process</h5>-->
                <!--<ul>-->
                <!--<li><a href="basket.html">Shopping cart</a>-->
                <!--</li>-->
                <!--<li><a href="checkout1.html">Checkout - step 1</a>-->
                <!--</li>-->
                <!--<li><a href="checkout2.html">Checkout - step 2</a>-->
                <!--</li>-->
                <!--<li><a href="checkout3.html">Checkout - step 3</a>-->
                <!--</li>-->
                <!--<li><a href="checkout4.html">Checkout - step 4</a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--<div class="col-sm-3">-->
                <!--<h5>Pages and blog</h5>-->
                <!--<ul>-->
                <!--<li><a href="blog.html">Blog listing</a>-->
                <!--</li>-->
                <!--<li><a href="post.html">Blog Post</a>-->
                <!--</li>-->
                <!--<li><a href="faq.html">FAQ</a>-->
                <!--</li>-->
                <!--<li><a href="text.html">Text page</a>-->
                <!--</li>-->
                <!--<li><a href="text-right.html">Text page - right sidebar</a>-->
                <!--</li>-->
                <!--<li><a href="404.html">404 page</a>-->
                <!--</li>-->
                <!--<li><a href="contact.html">Contact</a>-->
                <!--</li>-->
                <!--</ul>-->
                <!--</div>-->
                <!--</div>-->
                <!--</div>-->
                <!--&lt;!&ndash; /.yamm-content &ndash;&gt;-->
                <!--</li>-->
                <!--</ul>-->
                <!--</li>-->
            </ul>

        </div>
        <!--/.nav-collapse -->

        <div class="navbar-buttons">

            <div class="navbar-collapse collapse right" id="basket-overview">
                <a href="basket.html" class="btn btn-primary navbar-btn"><i
                        class="fa fa-shopping-cart"></i><span class="hidden-sm"
                                                              id="numItemsInCart">0 items in cart</span></a>
            </div>
            <!--/.nav-collapse -->

            <!--<div class="navbar-collapse collapse right" id="search-not-mobile">-->
            <!--<button type="button" class="btn navbar-btn btn-primary" data-toggle="collapse" data-target="#search">-->
            <!--<span class="sr-only">Toggle search</span>-->
            <!--<i class="fa fa-search"></i>-->
            <!--</button>-->
            <!--</div>-->

        </div>

        <!--<div class="collapse clearfix" id="search">-->

        <!--<form class="navbar-form" role="search">-->
        <!--<div class="input-group">-->
        <!--<input type="text" class="form-control" placeholder="Search">-->
        <!--<span class="input-group-btn">-->

        <!--<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>-->

        <!--</span>-->
        <!--</div>-->
        <!--</form>-->

        <!--</div>-->

        <!--/.nav-collapse -->

    </div>
    <!-- /.container -->
</div>
<!-- /#navbar -->

<!-- *** NAVBAR END *** -->

<script>
    $(document).ready(function () {
        $.ajaxSetup({
            contentType: "application/json; charset=utf-8"
        });

        if ($.cookie('logged_in') == null || $.cookie('logged_in') == "") {
            $("#tabAccount").remove()
        }

        $.getJSON('/cart', {}, function (data) {
            if (data != null) {
                var numItemsInCart = 0;
                $.each(data, function (index, element) {
                    if (element != null && element.itemId != null && element.itemId != "null") {
                        $.getJSON('/catalogue/' + element.itemId, function (data) {
                            numItemsInCart = numItemsInCart + element.quantity;
                        }).always(function () {
                            $('#numItemsInCart').text(numItemsInCart + ' item(s) in cart');
                        });
                    }
                });
            }
        }).error(function () {
            $('#basket-overview').remove();
        });

        //Add Hover effect to menus
        jQuery('ul.nav li.dropdown').hover(function () {
            jQuery(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn();
        }, function () {
            jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
        });

        // Set active tabs
        if (window.location.toString().indexOf("category.html") > -1) {
            $('#tabCatalogue').addClass("active");
        } else if (window.location.toString().indexOf("customer-") > -1) {
            $('#tabAccount').addClass("active");
        } else {
            $('#tabIndex').addClass("active");
        }
    });
</script>
